#page-home {
  #home-hero {
    padding-top: 12px;
    position: relative;

    @media (min-width: 768px) {
      padding-bottom: 56px;
    }

    @media (min-width: 992px) {
      padding-top: 80px;
      padding-bottom: 100px;
    }

    .g-container > div {
      @media (min-width: 992px) {
        display: flex;
        justify-content: center;
        margin: 0 (-$site-gutter-padding);
      }

      @media (min-width: 992px) {
        align-items: center;
      }

      & > div {
        @media (min-width: 992px) {
          padding: 0 $site-gutter-padding;
          width: 50%;
        }
        @media (max-width: 768px) {
          margin-bottom: 3rem;
        }

        &:first-child {
          text-align: center;
          @media (min-width: 768px) {
            margin-bottom: 4rem;
          }
          @media (min-width: 992px) {
            text-align: left;
          }

          & > div {
            @media (min-width: 992px) and (max-width: 1199px) {
              padding-left: 21px;
            }
          }

          h1 {
            margin: 24px 0 16px;

            @media (min-width: 768px) {
              margin-top: 32px;
            }

            @media (min-width: 992px) {
              margin-top: 40px;
            }
          }

          p {
            margin: 16px 0 32px;

            @media (min-width: 768px) {
              margin-bottom: 40px;
            }
          }

          .notification {
            background: transparent;
            border-radius: 3px;
            color: $black;
            display: inline-flex;
            margin-bottom: -2rem;
            padding: 16px;

            @media (min-width: 992px) {
              padding-left: 12px;
              padding-right: 12px;
            }

            &.no-bg {
              padding-left: 2px;
            }

            span {
              &:first-child {
                background: $white;
                border-radius: 2px;
                border: 1px solid #5f43e9;
                color: $black;
                margin-right: 4px;
                padding: 2px 9px;
                text-transform: uppercase;

                @media (min-width: 992px) {
                  float: left;
                  margin-right: 8px;
                }
              }

              &:last-child {
                display: inline-block;
              }
            }

            svg {
              margin-left: 4px;
            }
          }

          .button {
            min-width: 129px;
            margin: 0 5px 10px;

            @media (min-width: 400px) {
              margin: 0 10px;
            }

            @media (min-width: 768px) {
              margin: 0;
            }

            @media (min-width: 992px) {
              min-width: 144px;
            }

            & + .button {
              @media (min-width: 768px) {
                margin-left: 10px;
              }

              @media (min-width: 992px) {
                margin-left: 20px;
              }
            }
          }

          .secondary-link {
            border-bottom: 1px dashed $terraform-d1;
            color: $black;
            display: inline-block;
            margin: 24px 0 48px;
            padding-bottom: 4px;
            transition: all 0.25s ease;

            @media (min-width: 992px) {
              margin-top: 32px;
              margin-bottom: 0;
            }

            &:focus,
            &:hover {
              opacity: 0.8;
            }
          }
        }

        &:last-child {
          max-width: 700px;
          margin: 0 auto;
        }
      }
    }

    .controls {
      align-items: center;
      display: flex;
      justify-content: center;
      margin-bottom: 26px;

      @media (min-width: 992px) {
        width: 45vw;
      }

      @media (min-width: 1200px) {
        width: 42vw;
      }

      @media (min-width: 1725px) {
        width: 725px;
      }

      & > div {
        align-items: center;
        color: #d2d4dc;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 25px;
        text-transform: uppercase;

        &:hover,
        &.active {
          color: $black;
        }

        &.playing {
          color: $black;
        }

        & > span {
          transition: all 0.15s ease-out;
        }

        .progress-bar {
          background: #d2d4dc;
          border-radius: 2px 0 0 2px;
          height: 2px;
          margin-top: 6px;
          position: relative;
          width: 64px;

          span {
            background: $terraform;
            height: 2px;
            left: 0;
            position: absolute;
            width: 0;
          }
        }
      }
    }

    .videos {
      height: 0;
      margin-bottom: -112px;
      padding-top: calc((100% * 0.63569) + 18px);
      position: relative;
      width: 100%;
      overflow: hidden;

      @media (min-width: 768px) {
        margin-bottom: -152px;
        padding-top: calc((100% * 0.63569) + 38px);
      }

      @media (min-width: 992px) {
        padding-top: calc((45vw * 0.63569) + 38px);
        margin-bottom: 0;
        width: 45vw;
      }

      @media (min-width: 1200px) {
        padding-top: calc((42vw * 0.63569) + 38px);
        width: 42vw;
      }

      @media (min-width: 1725px) {
        padding-top: calc((725px * 0.63569) + 38px);
        width: 725px;
      }

      & > div {
        background: #0e1016;
        border-radius: 3px 3px 0 0;
        box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
        height: 100%;
        left: -80px;
        line-height: 0;
        opacity: 0;
        padding-top: 18px;
        position: absolute;
        top: 0;
        transition: all 0.5s;
        transition-timing-function: cubic-bezier(0.41, 0.15, 0.39, 0.39);
        width: 100%;

        @media (min-width: 768px) {
          padding-top: 38px;
        }

        &.active {
          left: 0;
          opacity: 1;
          transition: all 0.8s;
        }

        &.deactivate {
          left: 95px;
        }
      }

      .bar-buttons {
        display: flex;
        position: absolute;
        left: 7px;
        top: 6px;
        z-index: 0;

        @media (min-width: 768px) {
          left: 16px;
          top: 13px;
        }

        span {
          background: #252937;
          border-radius: 50%;
          display: block;
          height: 5px;
          margin-right: 4px;
          width: 5px;

          @media (min-width: 768px) {
            height: 12px;
            margin-right: 8px;
            width: 12px;
          }
        }
      }

      video {
        width: 100%;
        height: 100%;
      }

      .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background: $black;
        opacity: 0.02;
      }
    }
  }
  #infrastructure-as-code {
    @media (max-width: 991px) {
      padding-top: 200px;
    }
    @media (max-width: 768px) {
      padding-top: 130px;
    }
  }
  #pricing {
    & > .g-container > .btn-container {
      margin-top: 50px;
    }
  }
}

#terraform-overview-sign-in-link,
#terraform-overview-sign-up-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;

  & > div {
    height: 90%;
    display: flex;
    justify-content: center;

    & > a {
      display: flex;
      align-items: center;
      height: 60%;
      border-radius: 2px;
      padding: 1rem;
      border: 1px solid $terraform-d1;
      &:hover {
        background: $terraform-d1 !important;
        color: $white !important;
      }
    }
  }
}

#terraform-overview-sign-up-link {
  & a {
    background-color: $terraform;
    color: $white !important;

    &:hover {
      background-color: $terraform-d1;
    }
  }
}
